<template>
  <el-cascader ref="cascade"
               popper-class="cascader"
               :options="chinaRegionData"
               v-model="selectedOptions"
               @change="handleChange"
               :disabled="disabled"
               :placeholder="placeholder"
               :clearable="clearable"
               :filterable="filterable"
               :props="props.props"

  />
</template>
<script setup lang="ts" name="china-region-cascade">
import chinaRegionData from '/@/const/china-region-data.json'

const emit = defineEmits(['update:modelValue', 'change']);
const cascade = ref()
const props = defineProps({
  // 当前的值
  modelValue: [String, Array],
  // 类型 (一级联动，二级联动，三级联动)
  type: {
    type: Number,
    default: 3,
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: () => false,
  },
  placeholder: {
    type: String,
    default: "",
  },
  clearable: {
    type: Boolean,
    default: false,
  },
  filterable: {
    type: Boolean,
    default: false,
  },
  props: {
    type: Object,
    default: () => ({}),
  },

});

const selectedOptions = computed({
  get: () => {
    return props.modelValue;
    // return props.modelValue?.split(',');
  },
  set: (val) => {
    emit('update:modelValue', val);
    // emit('update:modelValue', val?.join(','));
  },
});

const handleChange = (value: String[]) => {
  const checkedNode = cascade.value.getCheckedNodes()[0]
  // console.log('handleChange', value, checkedNode)
  emit('change', value, checkedNode);
};

onMounted(() => {

});
</script>

<style lang="scss">
.cascader {

  & .el-radio {
    display: table;
    vertical-align: middle;
    width: 90%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    margin-left: -20px;
    padding-left: 10px;
  }

  & .el-radio__input {
    display: table-cell;
    vertical-align: middle;
  }

  & .el-checkbox {
    display: table;
    vertical-align: middle;
    width: 90%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    margin-left: -20px;
    padding-left: 10px;
  }

  & .el-checkbox__input {
    display: table-cell;
    vertical-align: middle;
  }
}
</style>
